// 封装一个读取的，防止代码的重复性
function getItem(key) {
	let oldData = localStorage.getItem(key);
	let arr = oldData ? JSON.parse(oldData) : [];
	return arr;
}

// 封装一个存储的，防止代码的重复性
function setItem(key, arr) {
	let json = JSON.stringify(arr);
	localStorage.setItem(key, json);
}

$(function() {
	// 封装一个计算总件和总价钱的代码
	function calc() {
		// 在本地存储中,把所有勾选的选出来,进行计算
		// 先把所有数据读取出来
		let data = getItem('gwc');
		// 选出里面被勾选的数据
		let checkData = data.filter((e) => {
			return e.checked;
		});
		// console.log(checkData);
		// 遍历里面被勾选的数据,开始计算
		let count = 0;
		let totalPrice = 0;
		checkData.forEach((e) => {
			count += e.number;
			totalPrice += e.number * e.price;
		});
		// console.log(count);
		// console.log(totalPrice);
		// 把数据更新到指定的位置
		$('.selected').text(count);
		$('.total-money').text(totalPrice);
	}
	// 读取本地数据
	// let oldData = localStorage.getItem('gwc');
	// 这里需要判断本地数据里面是否为空
	// let arr = oldData ? JSON.parse(oldData) : [];
	let arr = getItem('gwc');
	// 判断购物车里面有没有数据,如果没有,购物车的头部和尾部需要隐藏,有的话不需要隐藏
	if (arr.length != 0) {
		// 购物车头部和尾部的显示和隐
		$('.empty-tip').addClass('hidden');
		$('.cart-header').removeClass('hidden');
		$('.total-of').removeClass('hidden');
		let html = '';
		arr.forEach((e) => {
			html += `<div class="item" data-id="${e.pID}">
        <div class="row">
          <div class="cell col-1 row">
            <div class="cell col-1">
              <input type="checkbox" class="item-ck" ${e.checked ? 'checked' : ''}>
            </div>
            <div class="cell col-4">
              <img src="${e.imgSrc}" alt="">
            </div>
          </div>
          <div class="cell col-4 row">
            <div class="item-name">${e.name}</div>
          </div>
          <div class="cell col-1 tc lh70">
            <span>￥</span>
            <em class="price">${e.price}</em>
          </div>
          <div class="cell col-1 tc lh70">
            <div class="item-count">
              <a href="javascript:void(0);" class="reduce fl">-</a>
              <input autocomplete="off" type="text" class="number fl" value="${e.number}">
              <a href="javascript:void(0);" class="add fl">+</a>
            </div>
          </div>
          <div class="cell col-1 tc lh70">
            <span>￥</span>
            <em class="computed">${e.price * e.number}</em>
          </div>
          <div class="cell col-1">
            <a href="javascript:void(0);" class="item-del">从购物车中移除</a>
          </div>
        </div>
      </div>`;
		});
		$('.item-list').html(html);

		// 判断是否存在不勾选的点选多选框,如果有,设置全选取消勾选
		let hasUncheck = arr.find((e) => {
			return !e.checked;
		});
		// hasUncheck如果是true,代表了找到了没有勾选的
		// $('.pick-all').prop('checked', !hasUncheck);
		// 或者可以用if也行
		if (hasUncheck) {
			$('.pick-all').prop('checked', false);
		} else {
			$('.pick-all').prop('checked', true);
		}
		// 才开始加载也需要先计算一次
		calc();
	}

	// 实现全选全不选
	$('.pick-all').on('click', function() {
		let status = $(this).prop('checked');
		$('.item-ck').prop('checked', status);
		$('.pick-all').prop('checked', status);
		// 把全选的状态更新到本地存储里,只需要把数组里的所有数据都更新为和全选的一致
		arr.forEach((e) => {
			e.checked = status;
		});
		// 把数据覆盖到本地存储里面,实现永久保存
		// let json = JSON.stringify(arr);
		// localStorage.setItem('gwc', json);
		setItem('gwc', arr);
		// 点击全选也需要计算件数和总的价钱
		calc();
	});

	// 实现单选,单选全选完,全选就会选上,使用委托的方式实现,因为是动态生成的
	$('.item-list').on('click', '.item-ck', function() {
		// 得到所有单选的按钮
		let itemNum = $('.item-ck').length;
		// 勾选的个数
		let checkNum = $('.item-ck:checked').length;
		let isCheckAll = itemNum === checkNum;
		$('.pick-all').prop('checked', isCheckAll);

		// 获取当前的勾选的商品的id
		let id = parseInt($(this).parents('.item').attr('data-id'));
		// console.log(id);
		// 找到本地存储数据中与勾选对应的id商品,进行勾选状态更新
		let current = arr.find((e) => {
			return e.pID === id;
		});
		// console.log(current);
		// 设置checked属性就是当前勾选的状态
		current.checked = $(this).prop('checked');
		// 把数据覆盖到本地存储里面,实现永久保存
		// let json = JSON.stringify(arr);
		// localStorage.setItem('gwc', json);
		setItem('gwc', arr);

		// 下面的计算代码封装,因为很多地方需要使用
		/*
		// 在本地存储中,把所有勾选的选出来,进行计算
		// 先把所有数据读取出来
		let data = getItem('gwc');
		// 选出里面被勾选的数据
		let checkData = data.filter((e) => {
			return e.checked;
		});
		// console.log(checkData);
		// 遍历里面被勾选的数据,开始计算
		let count = 0;
		let totalPrice = 0;
		checkData.forEach((e) => {
			count += e.number;
			totalPrice += e.number * e.price;
		});
		// console.log(count);
		// console.log(totalPrice);
		// 把数据更新到指定的位置
		$('.selected').text(count);
        $('.total-money').text(totalPrice);
        */
		calc();
	});

	// 实现数量的增减
	$('.item-list').on('click', '.add', function() {
		// 找到上一个兄弟的元素
		let prev = $(this).prev();
		// 获取当前的数量
		let currentNum = parseInt(prev.val());
		currentNum++;
		// 在修改回去
		prev.val(currentNum);

		// 保存到本地存储里,根据id找到对应的商品,这段代码也可以封装,因为减少也要用
		let id = parseInt($(this).parents('.item').attr('data-id'));
		let current = arr.find((e) => {
			return e.pID === id;
		});
		current.number = currentNum;
		// 在覆盖回去
		setItem('gwc', arr);
		// 需要重新计算商品的件数和总价格
		calc();
		// 更新我这一行随着数量的减少总价也跟着减少
		// console.log($(this).parents('.row').find('.computed'));
		$(this).parents('.row').find('.computed').text(current.number * current.price);
	});
	$('.item-list').on('click', '.reduce', function() {
		// 找到上一个兄弟的元素
		let next = $(this).next();
		// 获取当前的数量
		let currentNum = parseInt(next.val());
		// 判断一下是否到1了,到了就不能减了
		if (currentNum <= 1) {
			alert('不能点了');
			return;
		}
		currentNum--;
		// 在修改回去
		next.val(currentNum);
		// 保存到本地存储里,根据id找到对应的商品
		let id = parseInt($(this).parents('.item').attr('data-id'));
		let current = arr.find((e) => {
			return e.pID === id;
		});
		current.number = currentNum;
		// 在覆盖回去
		setItem('gwc', arr);
		// 需要重新计算商品的件数和总价格
		calc();
		// 更新我这一行随着数量的减少总价也跟着减少
		// console.log($(this).parents('.row').find('.computed'));
		$(this).parents('.row').find('.computed').text(current.number * current.price);
	});

	// 使用事件委托删除数据
	$('.item-list').on('click', '.item-del', function() {
		// 询问用户是否删除,点击取消就没变化
		if (!confirm('确定删除吗')) {
			return;
		}
		// 删除
		$(this).parents('.item').remove();

		// 还要把对应的数据也删除
		let id = parseInt($(this).parents('.item').attr('data-id'));
		// 去数组中找和我相等的id
		// let current = arr.find((e) => {
		// 	return e.pID === id;
		// });
		// 更建议这样写
		arr.forEach((e, i) => {
			if (e.pID === id) {
				// 然后在数组中移除
				arr.splice(i, 1);
			}
		});
		// 在覆盖回去
		setItem('gwc', arr);
	});
});
